<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    title="导入"
    width="500px"
    :minHeight="380"
    @ok="handleSubmit"
  >
    <div class="flex justify-center"> </div>
    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
      <!-- <a-button type="primary" @click="handleCopy"> 复制 </a-button> -->
      <a-button type="primary" @click="handleSubmitSQL"> 执行SQL </a-button>
      <!-- <a-button type="primary" @click="handleSave"> 保存 </a-button> -->
    </template>
    <span style="white-space: pre-wrap">
      <a-textarea
        :allowClear="true"
        placeholder="请输入SQL"
        v-model:value="dataBase"
        :auto-size="{ minRows: 18, maxRows: 18 }"
      />
    </span>
    <!-- <div v-if="!dataBase" class="BasicModal-Empty">
      <Empty v-if="!dataBase" />
    </div> -->

    <!-- <BasicForm @register="registerForm" /> -->
  </BasicModal>
</template>
<script lang="ts">
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  // import { useMessage } from '/@/hooks/web/useMessage';
  // import { PageWrapper } from '/@/components/Page';
  import { ref, defineComponent, unref } from 'vue';
  import { useForm } from '/@/components/Form/index';
  import { formSchemaAction } from './menu.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { downloadByData } from '/@/utils/file/download';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getMetaSqlApi, getMetaExecuteSqlApi, getMetaSaveSqlApi } from '/@/api/database/metadata';
  // import { Empty } from 'ant-design-vue';

  export default defineComponent({
    name: 'ExportSQL2',
    components: { BasicModal },
    emits: ['success', 'register'],
    setup(_) {
      const valueRef = ref('');
      // const { createMessage } = useMessage();
      const { clipboardRef, copiedRef } = useCopyToClipboard();

      function handleCopy() {
        // const value = unref(valueRef);
        if (!dataBase.value) {
          createMessage.warning('暂无SQL！');
          return;
        }
        clipboardRef.value = dataBase.value;
        if (unref(copiedRef)) {
          createMessage.warning('SQL拷贝成功！');
        }
      }
      const dataBase: any = ref('');
      const dataBaseInfo: any = ref('');
      let str = '';
      const { createMessage } = useMessage();
      const [registerForm] = useForm({
        labelWidth: 90,
        baseColProps: { span: 12 },
        schemas: formSchemaAction,
        showActionButtonGroup: false,
      });
      const [registerDrawer, { closeModal }] = useModalInner(async (params) => {
        str = '';
        dataBase.value = '';
        params.iDs.forEach((e) => {
          str = e + ',' + str;
        });
        str = str.slice(0, -1);
        let api = params.isUpdate ? getMetaSqlApi : getMetaSaveSqlApi;
        // dataBase.value = await getMetaSqlApi(str);
        // dataBase.value = await getMetaExecuteSqlApi(str);
        let data = await api(str);
        dataBaseInfo.value = JSON.parse(JSON.stringify(data));
        // let temp = data && Object.keys(data);
        // temp &&
        //   temp.length &&
        //   temp.forEach((e) => {
        //     dataBase.value = dataBase.value + `${data[e]}`;
        //   });
        // dataBase.value = data;
      });

      async function handleSubmit() {
        // const values = await validate();
        // const params = Object.assign({}, values);
        // createMessage.success('操作成功');
        // emit('submit', params, title.value);
        closeModal();
      }
      async function handleSubmitSQL() {
        try {
          await getMetaExecuteSqlApi(dataBaseInfo.value);
          createMessage.success('执行成功');
        } catch (error) {}
        closeModal();
      }
      async function handleCancel() {
        closeModal();
      }
      async function handleSave() {
        console.log('database.value:', dataBase.value);
        // let res = await getMetaSaveSqlApi(str);
        downloadByData(dataBase.value, 'sql.sql');
        closeModal();
      }
      return {
        registerDrawer,
        registerForm,
        dataBase,
        handleSubmit,
        handleSubmitSQL,
        handleCancel,
        handleSave,
        handleCopy,
        value: valueRef,
      };
    },
  });
</script>
<style lang="less" scoped>
  .BasicModal-Empty {
    min-height: 380px;
    align-items: center;
    height: 100%;
    display: flex;
    flex: 1;
    justify-content: center;
  }
</style>
